import $Element from "@/core/Element";
import ColorPicker from "../colorPicker/colorPicker";

const PlaygroundConfig = {
    scale: {},
    size: {},
    backgroundImg: "",
    backgroundColor: "#fff"
}
type TSettingButtons = "ColorPicker" | "BackgroundPicker";
export default class PlaygroundSetting extends $Element {
    private container: $Element;
    private funcButtons: Array<TSettingButtons> = [];
    constructor(container: $Element, funcButtons?: Array<TSettingButtons>) {
        super("<div/>");
        this.container = container;
        this.container.appendChild(this);
        this.addClassName("playground-setting-menu");
        if (funcButtons) {
            this.funcButtons = funcButtons;
            this.renderSettingBar();
        }
    }
    setButtons(buttons: Array<TSettingButtons>) {
        this.funcButtons = buttons;
        this.renderSettingBar();
    }

    renderSettingBar() {
        this.empty();
        const self = this;
        this.funcButtons.forEach(button => {
            let buttonEle = new $Element("<div/>");
            buttonEle.addClassName("button");
            buttonEle.addEventListener("click", function () {
                if (button == "ColorPicker") {
                    const picker = new ColorPicker(self);
                    picker.confirm((
                        colors
                    ) => {
                        console.log(colors)
                    });
                }
            });
            this.appendChild(buttonEle);
        });
    }
    private createSetBackgroundColorButton() {

    }
    private createSetBackgroundImgButton() {

    }

}